<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>首页</title>
    <link rel="stylesheet" href="css/header.css" />
    <link rel="stylesheet" href="css/banner.css" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/footer.css" />
  </head>
  <body>
    <!-- 导航栏部分 -->
    <div class="header">
      <img src="img/logo.png" alt="logo" />
      <div class="nav">
        <ul>
          <!-- active对应激活样式 -->
          <li><a href="#" class="active">网站首页</a></li>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">新闻中心</a></li>
          <li><a href="#">产品中心</a></li>
          <li><a href="#">联系我们</a></li>
          <li><a href="#">下载APP</a></li>
        </ul>
      </div>
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <!-- banner-group用于存放所有的banner内容 -->
      <ul class="banner-group">
        <li>  
          <img src="img/4007.png" alt="banner-1" class="banner-background">
          <div class="text">
            <h1>千库建筑设计</h1>
            <div class="bar"></div>
            <p>QIANKU</p>
            <p>云集业界高级设计师</p>
          </div>
          <img src="img/lean-rectangle.png" alt="design" class="lean-block" />
          <img src="img/hori-rectangle.png" alt="design" class="mid-block" />
        </li>
        <li>
          <img src="img/4007.png" alt="banner-1" class="banner-background">
          <div class="text">
            <h1>千库建筑设计2</h1>
            <div class="bar"></div>
            <p>QIANKU</p>
            <p>云集业界高级设计师2</p>
          </div>
          <img src="img/lean-rectangle.png" alt="design" class="lean-block" />
          <img src="img/hori-rectangle.png" alt="design" class="mid-block" />
        </li>
        <li>
          <img src="img/4007.png" alt="banner-1" class="banner-background">
          <div class="text">
            <h1>千库建筑设计3</h1>
            <div class="bar"></div>
            <p>QIANKU</p>
            <p>云集业界高级设计师3</p>
          </div>
          <img src="img/lean-rectangle.png" alt="design" class="lean-block" />
          <img src="img/hori-rectangle.png" alt="design" class="mid-block" />
        </li>
      </ul>
      <!-- 轮播图的小圆点 -->
      <div class="page-dot">
        <ul>
          <li onclick="move(0)"></li>
          <li onclick="move(1)"></li>
          <li onclick="move(2)"></li>
        </ul>
      </div>
      <div class=" arrow left-arrow" onclick="lastBanner()">
        <img src="img/arrow-left.png" alt="arrow" />
      </div>
      <div class="arrow right-arrow" onclick="nextBanner()">
        <img src="img/arrow-right.png" alt="arrow" />
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="main">
      <div class="main-content">
        <div class="title">
          <div class="text">
            <p class="cn">设计方案</p>
            <p class="en">design scheme</p>
          </div>
          <div class="line"></div>
        </div>
        <div class="content">
          <div class="img-group">
            <div class="left">
              <div class="left-top">
                <img src="img/16772.png" alt="block" />
                <img src="img/16772.png" alt="block" />
              </div>
              <div class="left-bottom">
                <img src="img/4007.png" alt="block" />
              </div>
            </div>
            <div class="right">
              <img src="img/2034.png" alt="block">
            </div>
          </div>
        </div>
      </div>
      <div class="main-content join">
        <div class="content">
          <p>优秀的设计师在中国</p>
          <p>—— 专业为本，客户为先 ——</p>
          <div class="btn">加入我们 >></div>
        </div>
      </div>
      <div class="main-content">
        <div class="title">
          <div class="text">
            <p class="cn">经典案例</p>
            <p class="en">Classic case</p>
          </div>
          <div class="line"></div>
        </div>
        <div class="content case">
          <div class="up">
            <img src="img/19244.png" alt="block" />
            <div class="type">
              <p>01</p>
              <img src="img/triangle.png" alt="icon" />
              <p>建筑设计</p>
            </div>
          </div>
          <div class="down">
            <div class="type">
              <p>02</p>
              <img src="img/triangle.png" alt="icon" />
              <p>建筑设计</p>
            </div>
            <img src="img/43903.png" alt="block" />
          </div>
          <div class="up">
            <img src="img/7143.png" alt="block" />
            <div class="type">
              <p>03</p>
              <img src="img/triangle.png" alt="icon" />
              <p>建筑设计</p>
            </div>
          </div>
          <div class="down">
            <div class="type">
              <p>04</p>
              <img src="img/triangle.png" alt="icon" />
              <p>建筑设计</p>
            </div>
            <img src="img/16784.png" alt="block" />
          </div>
          <div class="up">
            <img src="img/19382.png" alt="block" />
            <div class="type">
              <p>05</p>
              <img src="img/triangle.png" alt="icon" />
              <p>建筑设计</p>
            </div>
          </div>
        </div>
      </div>
      <div class="main-content sign">
        <div class="title">
          <div class="text">
            <p class="cn">签约流程</p>
            <p class="en">Signing process</p>
          </div>
          <div class="line"></div>
        </div>
        <div class="content">
          <p>会员入会、会员级别、会员账户、会员积分、奖励规则、会员活动管理</p>
          <div class="step">
            <div>识别与获取</div>
            <img src="img/arrow.png" alt="arrow">
            <div>保有与维系</div>
            <img src="img/arrow.png" alt="arrow">
            <div>最大化价值提升</div>
          </div>
        </div>
      </div>
      <div class="main-content">
        <div class="title">
          <div class="text">
            <p class="cn">关于我们</p>
            <p class="en">About us</p>
          </div>
          <div class="line"></div>
        </div>
        <div class="content about">
          <p>会员入会、会员级别、会员账户、会员积分、奖励规则、会员活动管理</p>
          <div>
            <img src="img/4008.png" alt="block" />
            <div class="about-content">
              <div class="grey-line top"></div>
              <h2>千库电子商务有限公司</h2>
              <div class="paragraph">
                <p class="intro">这6句话，每天说一遍，孩子会一天比一天优秀</p>
                <p>很多父母以为给了孩子好的物质条件，孩子就能成功。但物质只能决定生活水平，父母的高度才能决定孩子的未来。优秀的父母都有个共性,他们会使用最好的教育工具——说话。这才是教育的最高境界，看完深受震撼!给差生一点时间，让他变成你喜欢的样子我想送自卑的孩子一杯酒。</p>  
              </div>
              <div class="grey-line bottom">
                <div class="btn">MORE>></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
      <div class="title">
        <p class="cn">联系我们</p>
        <p class="en">CONTACT US</p>
      </div>
      <div class="nav">
        <ul>
          <li><a href="#">网站首页</a></li>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">新闻中心</a></li>
          <li><a href="#">产品中心</a></li>
        </ul>
      </div>
      <div class="copyright">
        <p>千库网Copyright © 2014-2019 沪ICP备10011451号-26</p>
        <p>ICP证书:沪B2-20180057</p>
        <p>沪公网安备31011502008675号</p>
        <p>工业和信息化部举报邮箱:588ku@hanmaker.com网上有害信息举报专区</p>
      </div>
    </div>
    <!-- 回到顶部 -->
    <div class="back-top" onclick="backTop()">↑</div>
    <script src="js/index.js"></script>
    <script src="js/banner.js"></script>
  </body>
</html>